<template>
  <div>
    <el-form @submit.native.prevent :inline="true">
      <el-form-item>
        <el-button @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-plus" @click="handleEdit()">新建分组</el-button>
      </el-form-item>
    </el-form>
    <table class="table table-bordered vertical-align-middle text-center">
      <thead>
        <tr>
          <th width="17%">业务分组</th>
          <th width="17%">区域</th>
          <th width="14%">A角</th>
          <th width="14%">B角</th>
          <th width="14%">风控员</th>
          <th width="14%">财务经办人</th>
          <th style="min-width: 110px">操作</th>
        </tr>
      </thead>
      <tr v-if="!tableData.length" v-loading="loading">
        <td colspan="5">暂无分组信息</td>
      </tr>
      <tr v-for="(p, index) of tableData" v-loading="loading" :key="index">
        <td :rowspan="p.rowspan" class="align-middle" v-if="+p.rowspan">{{ p.group_name }}</td>
        <td>{{ p.address_code_name }}</td>
        <td>{{ p.res_a_name }}</td>
        <td>{{ p.res_b_name }}</td>
        <td>{{ p.risk_person_name }}</td>
        <td>{{ p.finance_person_name }}</td>
        <td :rowspan="p.rowspan" class="align-middle" v-if="+p.rowspan">
          <el-button type="text" class="px-1 py-0" @click="handleEdit(p.bus_group_id)">
            <i class="fa fa-edit"></i>
          </el-button>
          <el-button type="text" @click="handleDelete(p)" class="px-1 py-0">
            <i class="fa fa-trash text-danger"></i>
          </el-button>
        </td>
      </tr>
    </table>
    <staff-group-edit
      :visible.sync="dialogVisible"
      :table-id="tableId"
      @success="getData()"
    ></staff-group-edit>
  </div>
</template>

<script>
import { calcSpan } from '@/common/plugins/tools/common'
import StaffGroupEdit from './StaffGroupEdit'
export default {
  components: { StaffGroupEdit },
  data() {
    return {
      params: {
        subKey: 'bus_group_detail.bus_group_id',
      },
      order: {
        create_time: 'asc',
      },
      dialogVisible: false,
      tableId: '',
      tableName: 'bus_group',
      tableData: [],
      loading: false,
    }
  },

  created() {
    this.$store.dispatch('getStaff')
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || []
          this.tableData = this.getTableData(data)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getTableData(data) {
      const newData = []
      data.map(item => {
        if (item.bus_group_detail && item.bus_group_detail.length) {
          item.bus_group_detail
            .sort((a, b) => a.order_num - b.order_num)
            .forEach(detail => {
              newData.push({
                group_name: item.group_name,
                ...detail,
              })
            })
        }
      })
      return calcSpan(newData, 'bus_group_id')
    },
    handleDelete(p) {
      this.$utils
        .msgbox({
          type: 'warning',
          message: `确定删除分组: ${p.group_name}?`,
          beforeClose: () =>
            this.$api.relatedDelete(this.$serviceName, {
              masterTableInfo: JSON.stringify({ bus_group_id: p.bus_group_id }),
              masterTableName: 'bus_group',
              slaveTableName: 'bus_group_detail',
            }),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
    handleEdit(id = '') {
      this.tableId = id
      this.dialogVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
